<template>
  <div class="wrapper">
    <div class="titel-row">
      <div class="home-icon">
        <img src="../../assets/inquiryRegister/home.png" alt />
      </div>
      <div class="title">事件记录</div>
    </div>
    <div class="content">
      <SearchHeader v-on:callback="onSearchCallback" v-bind:config="searchConfig" />
      <div class="table-wrapper">
        <el-table
          v-on:cell-click="onClickRow"
          :row-class-name="tableRowClassName"
          stripe
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          row-key="id"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column
            v-for="(item,index) in thConfig"
            :key="index"
            v-bind:prop="item.prop"
            v-bind:label="item.label"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="查看" placement="top">
                <el-button
                  v-on:click.stop.prevent="onDetail(scope.row)"
                  icon="el-icon-search"
                  size="small"
                  circle
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="request.pageNum"
          :page-size="10"
          prev-text="上一页"
          next-text="下一页"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <ViewDetail
      width="800px"
      :dialogVisible="detailVisible"
      @onClose="detailVisible=false"
      :list="detailData"
      :columns="detailColumns"
    />
  </div>
</template>

<script>
import SearchHeader from "../../components/layout/searchHeader.vue"; //搜索栏
import { Popover, ViewDetail } from "../../components/common"; //小弹窗
import Pubsub from "../../utils/pubsub";
import {
  sortingEventinfoQueryBranchListPage,
  findByDictCode
} from "../../config/api.js";
import { getTimeStr, getCookie } from "../../utils";
export default {
  components: {
    SearchHeader,
    Popover,
    ViewDetail
  },
  data() {
    return {
      request: {
        pageNum: 1,
        pageSize: 10,
        eventName: "",
        startTime: "",
        endTime: "",
        status: "",
        dealUnitCode:
          getCookie("department") && JSON.parse(getCookie("department")).id //所属委办局编码
      }, //列表请求参数
      detailVisible: false, //详情窗口显示隐藏
      rejectVisible: false, //驳回窗口显示隐藏
      detailData: {}, //详情数据
      rejectItem: {}, //驳回项的数据
      areaCode: [], //数据字典返回值--区域
      multipleSelection: [], //选中的项
      total: 0, //共多少条
      handleType: "", //操作预审登记状态，add为新增，edit为编辑。
      currentRow: {}, //当前操作的项
      thConfig: [
        { prop: "eventName", label: "事件名称" },
        { prop: "eventAddress", label: "事件地点" },
        { prop: "eventSourceName", label: "事件来源" },
        { prop: "newEventTime", label: "上报时间" },
        { prop: "createUserName", label: "办结人" },
        { prop: "newCompleteTime", label: "办结时间" },
        { prop: "isEnd", label: "是否办结" }
      ], //table头部配置
      tableData: [],
      buttonConfig: [
        // {
        //   name: "新增",
        //   icon: addIcon,
        //   type: "showRegisterDialog",
        //   color: "main"
        // }
        // {
        //     name: "分发",
        //     icon: dispatchIcon,
        //     type: "dispatch",
        //     color: "green"
        // }
        // {name:"修改",icon:editIcon,type:"edit",color:"green"},
        // {name:"删除",icon:deleteIcon,type:"delete",color:"default"},
        // {name:"驳回",icon:rejectIcon,type:"reject",color:"default"},
      ],
      searchConfig: [
        //搜索栏配置
        {
          label: "全部",
          code: "keyword",
          type: "search",
          value: ""
        },
        {
          label: "上报时间",
          code: ["startTime", "endTime"],
          type: "rangePicker",
          value: ""
        },
        {
          label: "是否办结",
          code: "status",
          type: "radio",
          value: "",
          data: [
            { name: "全部", value: "", active: true },
            { name: "是", value: "5", active: false },
            { name: "否", value: "4", active: false }
          ],
          delectVisible: false
        }
      ],
      detailColumns: [
        {
          title: "事件名称",
          dataIndex: "eventName"
        },
        {
          title: "事件地点",
          dataIndex: "eventAddress"
        },
        {
          title: "事件来源",
          dataIndex: "eventSourceName"
        },
        {
          title: "上报时间",
          dataIndex: "newEventTime"
        },
        {
          title: "办结人",
          dataIndex: "createUserName"
        },
        {
          title: "办结时间",
          dataIndex: "newCompleteTime"
        },
        {
          title: "是否办结",
          dataIndex: "isEnd"
        }
      ]
    };
  },
  mounted() {
    // this.pubsub_token = Pubsub.subscribe("myBacklogList", (type, values) => {
    //   // 用于督办/办结后回调执行刷新列表
    //   this.getList();
    // });
    this.getList();
    this.getDictCode();
  },
  destroyed() {
    // this.pubsub_token && Pubsub.unsubscribe(this.pubsub_token);
  },
  methods: {
    /**
     * 获取数据字典--取件类型
     */
    getDictCode() {
      //事件来源数据字典
      findByDictCode({ dictCode: "sortingEventSourceCode" }).then(
        (res = {}) => {
          let newData = res.data && res.data.length ? res.data : [];
          if (newData.length > 0) {
            newData.map(item => {
              item.name = item.dictDataName;
              item.value = item.dictDataCode;
              item.active = false;
            });
          }
          (
            this.searchConfig.find(item => item.code == "eventSourceCode") || {}
          ).data = [{ name: "全部", value: "", active: true }, ...newData];
        }
      );
    },
    /**
     * 搜索栏回调
     */
    onSearchCallback(re = {}) {
      let request = Object.assign(this.request, re);
      this.request = request;
      this.getList();
    },
    /**
     * 设置table某一项class
     */
    tableRowClassName({ row, rowIndex }) {
      // if (rowIndex === 2) {
      //   return "warning-row";
      // }
      if (rowIndex % 2 === 0) {
        return "even-row";
      } else {
        return "odd-row";
      }
    },
    /**
     * 设置选中项
     */
    handleSelectionChange(e = []) {
      if (e.length) {
        e.map(item => {
          this.multipleSelection.push(item.id);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    /**
     * 查看详情
     */
    onDetail(e) {
      // this.detailData=e||{};//传参
      this.detailData = e || {}; //传参
      this.detailVisible = true;
    },
    //删除，不需要任何事件，只为处理事件冒泡。
    onDelete() {},

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.request.pageNum = val;
      this.getList();
    },
    /**
     * 操作按钮点击事件
     */
    openDialog(type, values) {
      Pubsub.publish(type, values);
    },
    getList() {
      sortingEventinfoQueryBranchListPage(this.request).then((res = {}) => {
        if (res.rows && res.rows.length) {
          res.rows.map(r => {
            r.newEventTime = getTimeStr(r.eventTime);
            r.newCompleteTime = getTimeStr(r.completeTime);
          });
        }
        this.tableData = res.rows;
        this.total = res.total || 0;
      });
    },
    /**
     * 点击table row
     */
    onClickRow(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
    }
  },
  created() {}
};
</script>

<style lang = "scss" scoped>
.wrapper {
  margin: 20px;
  background: #fff;
}
.titel-row {
  display: flex;
  align-items: center;
  .home-icon {
    height: 50px;
    width: 50px;
    background: #1a36a9;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .title {
    font-size: 22px;
    color: #272c67;
  }
}
.content {
  padding: 0 20px 80px 20px;
}
.pager {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.table-wrapper {
  position: relative;
  margin-top: 46px;
  .handle-row {
    position: absolute;
    top: -40px;
    right: 0;
    display: flex;
    justify-content: flex-end;
  }
  .handle-btn {
    width: 76px;
    height: 30px;
    border-radius: 3px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      margin-right: 10px;
    }
    &:last-child {
      margin-right: 0;
    }
    &:active {
      opacity: 0.8;
    }
    &.main {
      background: #1a36a9;
      color: #fff;
    }
    &.green {
      background: #007130;
      color: #fff;
    }
    &.default {
      background: #e5e5e5;
    }
    &:disabled {
      background: #999;
      opacity: 1;
    }
  }
}
</style>
<style>
</style>
